import React from 'react'
import {
  getShopping ,
  getChangeChecked ,
  getDeleteChecked,
  getChangeAllChecked,
  getChangeCount,
  getDeleteOne,
  getPay
} from '@/api/shopping'
import { Button, Table ,Popconfirm ,message} from 'antd';
import { useState,useEffect } from 'react';
import { useSize} from 'ahooks'
function Cart() {
  const [num, setNum] = useState('')
  const [shopping, setShopping] = useState([])
  const [show, setShow] = useState(true)
  useEffect(() => {
    getShoppingData()
  }, [])
  
  const columns = [
    {
      title: '商品',
      dataIndex: 'title',
    },
    {
      title: '数量',
      dataIndex: 'cart_number',
    },
    {
      title: '价格',
      dataIndex: 'current_price',
    },
    {
      title: '编辑数量',
      dataIndex: 'operation',
      render: (_, record) =>(
        <Popconfirm 
          title="修改数量" 
          onConfirm={() => {
            getChangeCount({
              id:1,
              goodsId:record.goods_id,
              number:num,
            }).then((res)=>{
              if(res.data.code===0){
                message.warning('库存不足还剩余'+record.goods_number)
              }
              if(res.data.code===1){
                message.success(res.data.message)
                getShoppingData()
              }
              setNum('')
            })
          }}
          description={<input value={num} onChange={e=>{setNum(e.target.value)}}/>}
          onCancel={() => {
            setNum('')
          }}
        >
          <Button type="primary">编辑</Button>
        </Popconfirm>
      ) 
    },
    {
      title: '删除',
      dataIndex: 'operation',
      render: (_, record) =>(
        <Popconfirm 
          title="删除" 
          onConfirm={() => {
            getDeleteOne({
              id:1,
              goodsId:record.goods_id,
            }).then((res)=>{
              message.success(res.data.message)
              getShoppingData()
            })
          }}
          description={'真的要删除嘛'}
        >
          <Button type="primary" danger>删除</Button>
        </Popconfirm>
      ) 
    },
  ];
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [loading, setLoading] = useState(false);

  const getShoppingData = () => {
    getShopping().then((res) => {
      setShopping(res.data.cart)
    })
  }

  //删除选中
  const start = () => {
    setLoading(true);
    //删除选中接口
    getDeleteChecked().then((res)=>{
      //重新请求剩余购物车数据
      getShoppingData()
      setLoading(false)
    })
  };
  //支付
  const pay = () => {
    setLoading(true);
    //删除选中接口
    getPay().then((res)=>{
      //没有支付接口用删除代替
      getDeleteChecked().then((res)=>{
        //重新请求剩余购物车数据
        getShoppingData()
        setLoading(false)
        message.success('支付成功啦！')
        setSelectedRowKeys([])
      })
    })
  }

  //点击改变状态
  const rowSelection = {
    selectedRowKeys,
    //左边选中状态 点击左侧按钮触发
    onChange: (newSelectedRowKeys) => {
      //选中的数据
      setSelectedRowKeys(newSelectedRowKeys);
    },
    //点击改变状态 点击左侧按钮触发
    onSelect: (record,selected, selectedRows,) => {
      //单独改变状态接口
      getChangeChecked({
        id:1,
        goodsId:record.goods_id,
      })
    },
    //全选改变状态 点击全选按钮触发
    onSelectAll: (changeRows) => {
      //全选改变状态接口
      getChangeAllChecked({
        id:1,
        type:changeRows?'1':'0',
      })
    }
  };
  const hasSelected = selectedRowKeys.length > 0;

  const bodySize = useSize(document.querySelector('body'))
  const defaultHeight = document.body.offsetHeight
  return (
    <div >
      <div
        style={{
          marginBottom: 16,
        }}
      > 
        <Button 
          type="primary" 
          onClick={()=>{setShow(!show)}} 
          style={{
            position:'absolute',
            right:40,
          }}
        >
          设置
        </Button>
        {
          show
          ?(<Button type="primary" onClick={pay} disabled={!hasSelected} loading={loading}>
            支付
          </Button>)
          :(<Button type="primary" onClick={start} disabled={!hasSelected} loading={loading}>
          删除
        </Button>)
        }
        <span
          style={{
            marginLeft: 8,
          }}
        >
          {hasSelected ? `选中 ${selectedRowKeys.length} 个商品` : ''}
        </span>
      </div>
      <Table 
        style={{
          height:(bodySize?bodySize.height:defaultHeight)-250,
          overflow:'auto',
        }}
        rowSelection={rowSelection}
        pagination={{
          position: ['none'],
          defaultPageSize:shopping.length
        }}
        columns={columns} 
        dataSource={
        shopping?.map(item=>{
          return {
            key:item.goods_id,
            ...item,
            
          }
        })
      } />
    </div>
  )
}
export default Cart